<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/plugins/iframeTools.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {


            $(".appendRow").click(function () {
                //获取到表格中的第一个元素,并且克隆
                var tr =  $("#edit_table_body tr:first").clone()

                //清空行中的数据
                tr.find("[tag=pid]").val("");
                tr.find("[tag=name]").val("");
                tr.find("[tag=costPrice]").val("");
                tr.find("[tag=number]").val("");
                tr.find("[tag=remark]").val("");
                tr.find("[tag=brand]").text("");
                tr.find("[tag=amount]").text("");
                //追加到表格中
                tr.appendTo("#edit_table_body");

            });

            $("#editForm").submit(function () {
                //获取tbody中所有的行
                var trArray = $("#edit_table_body tr");
                for (var i = 0 ; i<trArray.size() ;i++ ){
                    console.log(i);
                    var tr = $(trArray[i]);

                    //修改需要提交的`表单的名称 ,加上新的索引值
                    tr.find("[tag=pid]").prop("name" ,"items["+i+"].product.id")
                    tr.find("[tag=costPric]").prop("name" ,"items["+i+"].costPrice")
                    tr.find("[tag=number]").prop("name" ,"items["+i+"].number")
                    tr.find("[tag=remark]").prop("name" ,"items["+i+"].remark")
                }
            });

            //打开商品选择窗口
            $("#edit_table_body").on("click",".searchproduct",function () {
                //找到当前所在的行
                var tr = $(this).closest("tr");
                //打开模糊框展示商品
                $.dialog.open("/product/selectProductList.do", {
                    title: "选择商品",
                    width: 800,
                    height:600,
                    close: function () {
                        //获取回传数据
                        var json = $.dialog.data("json");
                        //回显数据
                        if(json){
                        tr.find("[tag=pid]").val(json["id"]);
                        tr.find("[tag=name]").val(json["name"]);
                        tr.find("[tag=cosPrice]").val(json["cosPrice"]);


                        tr.find("[tag=brand]").val(json["brandName"])
                        }
                    }
                },false);

                    //计算金额小计
            }).on("change","[tag=costPrice],[tag=number]",function () {

                    var tr = $(this).closest("tr");
                    //获取到金额的两个框和里面的值

                    var costPrice = parseFloat(tr.find("[tag=costPrice]").val() || 0) ;
                    var number = parseFloat(tr.find("[tag=number]").val() || 0);
                    //使用数量 * 成本价得到小计
                    var amount = number * costPrice ;
                    //设置到页面
                    //将结果4舍5入
                    tr.find("[tag=amount]").text(amount.toFixed(2))

                //删除明细

            }).on("click",".removeItem",function () {
                    var tr  = $(this).closest("tr")
                    //获取所有的tr,判断tr数组是否大于一
                    if($("#edit_table_body tr").size() > 1){
                        tr.remove()
                    }else{
                        tr.find("[tag=pid]").val("");
                        tr.find("[tag=name]").val("");
                        tr.find("[tag=costPrice]").val("");
                        tr.find("[tag=number]").val("");
                        tr.find("[tag=remark]").val("");
                        tr.find("[tag=amount]").text("");
                        tr.find("[tag=brand]").text("");
                    }
                });
        });

    </script>
</head>
<body>
<form name="editForm" action="/orderbill/saveorupdate.do" method="post" id="editForm">
    <input type="hidden" value="${orderbill.id}" name="id">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">采购订单编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">订单编号</td>
                    <td class="ui_text_lt">
                        <input name="sn" class="ui_input_txt02" value="${orderbill.sn}"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">供应商</td>
                    <td class="ui_text_lt">
                        <select name="supplier.id" class="ui_select01">
                            <c:forEach items="${suppliers}" var="c">
                                <option value="${c.id}" ${c.id == orderbill.supplier.id ? 'selected' : ''}>${c.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">
                        <fmt:formatDate value="${orderbill.vdate}" pattern="yyyy-MM-dd" var="fmtVData"/>
                        <input name="vdate" class="ui_input_txt02" value="${fmtVData}"/>
                    </td>
                </tr>

                <tr>
                    <td class="ui_text_rt" width="140">单据明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" border="0" style="width: auto">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="200">货品</th>
                                <th width="120">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="80">金额小计</th>
                                <th width="150">备注</th>
                                <th width="60"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">
                            <tr>
                                <%--<c:choose>--%>
                                    <%--<c:when test="${orderbill.id == null}">--%>
                                        <td></td>
                                        <td>
                                            <input disabled="true" readonly="true"  class="ui_input_txt02" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" name="adas" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input tag="costPrice" name="asas" class="ui_input_txt00"/></td>
                                        <td><input tag="number" name="asas" class="ui_input_txt00"/></td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" name="asa" class="ui_input_txt02"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                            </tr>
                            <%--</c:when>--%>
                            <%--<c:otherwise>--%>
                                <%--<c:forEach items="${orderbill.items}" var="c">--%>
                                    <%--<tr>--%>
                                        <%--<td></td>--%>
                                        <%--<td>--%>
                                            <%--<input disabled="true" readonly="true" value="${c.product.name}" class="ui_input_txt02" tag="name" />--%>
                                            <%--<img src="/images/common/search.png" class="searchproduct"/>--%>
                                            <%--<input type="hidden" name="adas" tag="pid" value="${c.product.id}"/>--%>
                                        <%--</td>--%>
                                        <%--<td><span tag="brand">${c.product.brandName}</span></td>--%>
                                        <%--<td><input tag="costPrice" name="asas" value="${c.costPrice}" class="ui_input_txt00" /></td>--%>
                                        <%--<td><input tag="number" value="${c.number}" name="asas" class="ui_input_txt00" /></td>--%>
                                        <%--<td><span tag="amount">${c.amount}</span></td>--%>
                                        <%--<td><input tag="remark" name="asa" value="${c.remark}" class="ui_input_txt02" /></td>--%>
                                        <%--<td>--%>
                                            <%--<a href="javascript:;" class="removeItem">删除明细</a>--%>
                                        <%--</td>--%>
                                    <%--</tr>--%>
                                <%--</c:forEach>--%>
                            <%--</c:otherwise>--%>
                            <%--</c:choose>--%>
                            <%--</tbody>--%>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="submit" value="确定保存" class="ui_input_btn01"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>
